import defaultRenderEmpty from 'antd/lib/config-provider/defaultRenderEmpty'
import React, { useState, useMemo } from 'react'

export default function MemorizeValue() {
    const [a, setA] = useState(1)
    const [b, setB] = useState(10)
    const [c, setC] = useState(11)

    const handleClick = (type) => {
        switch (type) {
            case 'a':
                setA(a + 1)
                break;
            case 'b':
                setB(b + 10)
                break;
            case 'c':
                setC(c + 3)
                break;
            default:
                return false
        }
    }
    // useMemo监听数组里的数，返回依赖的函数
    const sum = useMemo(() => {
        console.log('1');
        return (
            <>
                <p>a+b的值是: {a + b}</p>

            </>
        )
    }, [a, b])

    return (
        <>
            <p>a:{a}</p>
            <p>b:{b}</p>
            <p> c:{c}</p>
            {sum}
            <button onClick={() => { handleClick('a') }}>a+1</button>
            <button onClick={() => { handleClick('b') }}>a+10</button>
            <button onClick={() => { handleClick('c') }}>c+3</button>

        </>
    )
}
